<template>
    <div>
        <p>
            <button class="btn btn-white btn-default btn-round" v-on:click="add()">
                <i class="ace-icon fa fa-edit"></i>
                新增
            </button>
            &nbsp;
            <button class="btn btn-white btn-default btn-round" v-on:click="list(1)">
                <i class="ace-icon fa fa-refresh"></i>
                刷新
            </button>
        </p>
        <pagination ref="pagination" v-bind:list="list"></pagination>

        <div class="row">
            <div class="col-md-4" v-for="course in courses">
                <div class="thumbnail search-thumbnail">
                    <img class="media-object" src="/static/image/demo-course.jpg" v-show="!course.image" />
                    <img class="media-object" v-bind:src="course.image" v-show="course.image" />
                    <div class="caption">
                        <div class="clearfix">
              <span class="pull-right label label-primary info-label">
                {{COURSE_LEVEL | optionKV(course.level)}}
              </span>
                            <span class="pull-right label label-primary info-label">
                {{COURSE_CHARGE | optionKV(course.charge)}}
              </span>
                            <span class="pull-right label label-primary info-label">
                {{COURSE_STATUS | optionKV(course.status)}}
              </span>
                        </div>

                        <h3 class="search-title">
                            <a class="blue" href="#">{{course.name}}</a>
                        </h3>
                        <p>
                            <span class="blue bolder bigger-150">{{course.price}}&nbsp;<i class="fa fa-rmb"></i></span>&nbsp;
                        </p>
                        <p>{{course.summary}}</p>
                        <p>
                            <span class="badge badge-info">{{course.id}}</span>
                            <span class="badge badge-info">排序：{{course.sort}}</span>
                            <span class="badge badge-info">{{course.time | formatSecond}}</span>
                        </p>
                        <p>
                            <button class="btn btn-white btn-xs btn-info btn-round" v-on:click="toChapter(course)">
                                大章
                            </button>&nbsp;
                            <button class="btn btn-white btn-xs btn-info btn-round" v-on:click="toContent(course)">
                                内容
                            </button>&nbsp;
                            <button class="btn btn-xs btn-info" v-on:click="edit(course)">
                                <i class="ace-icon fa fa-pencil bigger-120"></i>
                        </button>
                        <button class="btn btn-xs btn-danger" v-on:click="del(course.id)">
                            <i class="ace-icon fa fa-trash-o bigger-120"></i>
                        </button>
                        </p>

                    </div>
                </div>
            </div>
        </div>


        <div class="modal fade" id="form-modal" role="dialog" tabindex="-1">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">表单</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">
                                    分类
                                </label>
                                <div class="col-sm-10">
                                    <ul class="ztree" id="tree"></ul>
                                </div>
                            </div>

                            <div class="form-group">
                                <label  class="col-sm-2 control-label">名称</label>
                                <div class="col-sm-10">
                                    <input class="form-control"   v-model="course.name">
                                </div>
                            </div>
                            <div class="form-group">
                                <label  class="col-sm-2 control-label">概述</label>
                                <div class="col-sm-10">
                                    <input class="form-control"   v-model="course.summary">
                                </div>
                            </div>
                            <div class="form-group">
                                <label  class="col-sm-2 control-label">时长</label>
                                <div class="col-sm-10">
                                    <input class="form-control"   v-model="course.time">
                                </div>
                            </div>
                            <div class="form-group">
                                <label  class="col-sm-2 control-label">价格（元）</label>
                                <div class="col-sm-10">
                                    <input class="form-control"   v-model="course.price">
                                </div>
                            </div>
                            <div class="form-group">
                                <label  class="col-sm-2 control-label">封面</label>
                                <div class="col-sm-10">
                                    <input class="form-control"   v-model="course.image">
                                </div>
                            </div>
                            <div class="form-group">
                                <label  class="col-sm-2 control-label">级别</label>
                                <div class="col-sm-10">
                                    <select class="form-control" v-model="course.level">
                                        <option v-bind:value="o.key" v-for="o in COURSE_LEVEL">{{o.value}}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label  class="col-sm-2 control-label">收费</label>
                                <div class="col-sm-10">
                                    <select class="form-control" v-model="course.charge">
                                        <option v-bind:value="o.key" v-for="o in COURSE_CHARGE">{{o.value}}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label  class="col-sm-2 control-label">状态</label>
                                <div class="col-sm-10">
                                    <select class="form-control" v-model="course.status">
                                        <option v-bind:value="o.key" v-for="o in COURSE_STATUS">{{o.value}}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label  class="col-sm-2 control-label">报名数</label>
                                <div class="col-sm-10">
                                    <input class="form-control"   v-model="course.enroll">
                                </div>
                            </div>
                            <div class="form-group">
                                <label  class="col-sm-2 control-label">顺序</label>
                                <div class="col-sm-10">
                                    <input class="form-control"   v-model="course.sort">
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-default" data-dismiss="modal" type="button">取消</button>
                        <button class="btn btn-primary" type="button" v-on:click="save()">保存</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    </div>
</template>

<script>
    import Pagination from "../../components/pagination";
    export default {
        name: "business-course",
        components: {Pagination},
        data:function(){
            return  {
                course:{
                },
                courses: [],
                COURSE_LEVEL: COURSE_LEVEL,
                COURSE_CHARGE: COURSE_CHARGE,
                COURSE_STATUS: COURSE_STATUS,
                categorys: [],
                tree: {},
                res:[],
            }
        },
        mounted: function() {
            let _this = this;
            _this.allCategory();
            _this.list(1);

            // sidebar激活样式方法一
            // this.$parent.activeSidebar("business-course-sidebar");
        },
        methods: {
            /**
             * 点击【新增】
             */
            add(){
                let _this = this;
                _this.course = {};
                $("#form-modal").modal("show");
            },
            /**
             * 点击【编辑】
             */
            edit(course){
                let _this = this;
                _this.course = $.extend({}, course);
                $("#form-modal").modal("show");
            },
            /**
             * 列表查询
             */
            list(page) {
                let _this = this;
                Loading.show();
                this.$ajax.post ( process.env.VUE_APP_SERVER +'/business/admin/course/list',this.$qs.stringify(
                    {
                        page: page,
                        size: _this.$refs.pagination.size,
                    })).then((response)=>{
                        Loading.hide();
                    let resp = response.data;
                    _this.courses = resp.content.list;
                    _this.$refs.pagination.render(page,resp.content.total);
                })
            },
            /**
             * 点击【保存】
             */
            save() {
                let _this = this;

               // 保存校验
               //  if (1 != 1
               //      || !Validator.require(_this.course.name, "名称")
               //      || !Validator.length(_this.course.name, "名称", 1, 50)
               //      || !Validator.length(_this.course.summary, "概述", 1, 2000)
               //      || !Validator.length(_this.course.image, "封面", 1, 100)
               //
               //  ) {
               //      return;
               //  }
                let categorys = _this.tree.getCheckedNodes();
                if (Tool.isEmpty(categorys)) {
                    Toast.warning("请选择分类！");
                    return;
                }
                // console.log(categorys,11);
                // _this.course.categorys= getData(categorys);
                // console.log(_this.course.categorys,111);
                // function getData(data) {
                //     let result = [];
                //     data.forEach((item,index)=>{
                //         result.push({id:item.id,parent:item.parent,name:item.name,sort:item.sort})
                //     })
                //     return result;
                // }
                _this.course.categorys= JSON.stringify(categorys);
                _this.course.categorys= getData(categorys);
                console.log(_this.course.categorys,111);
                function getData(data) {
                    let result = {};
                    for (let i = 0; i < data.length; i++) {
                        result['categorys[' + i + '].id'] = categorys[i].id;
                        result['categorys[' + i + '].name'] = categorys[i].name;
                        result['categorys[' + i + '].parent'] = categorys[i].parent;
                        result['categorys[' + i + '].sort'] = categorys[i].sort;
                    }
                    return JSON.stringify(result);
                }
                console.log(_this.course);
                Loading.show();
                this.$ajax.post (process.env.VUE_APP_SERVER +'/business/admin/course/save',_this.$qs.stringify(_this.course)
                ).then((response)=>{
                    Loading.hide();
                    let resp = response.data;
                    if (resp.success){
                        $("#form-modal").modal("hide");
                        _this.list(1);
                        Toast.success("保存成功！");
                    }else{
                        Toast.warning(resp.message)
                    }
                })
            },
            /**
             * 点击【删除】
             */
            del(id) {
                let _this = this;
                Confirm.show("删除课程后不可恢复，确认删除？", function () {
                    Loading.show();
                    _this.$ajax.post(process.env.VUE_APP_SERVER +'/business/admin/course/delete',_this.$qs.stringify({
                        id:id
                    })).then((response)=>{
                        Loading.hide();
                        let resp = response.data;
                        if (resp.success) {
                            _this.list(1);
                            Toast.success("删除成功！");
                        }
                    })
                });
            },
            /**
             * 点击【大章】
             */
            toChapter(course) {
                let _this = this;
                SessionStorage.set(SESSION_KEY_COURSE, course);
                _this.$router.push("/business/chapter");
            },

            /**
             * 点击【内容】
             */
            toContent(course) {
                let _this = this;
                SessionStorage.set(SESSION_KEY_COURSE, course);
                _this.$router.push("/business/content");
            },
            allCategory() {
                let _this = this;
                Loading.show();
                _this.$ajax.post(process.env.VUE_APP_SERVER + '/business/admin/category/all').then((response)=>{
                    Loading.hide();
                    let resp = response.data;
                    _this.categorys = resp.content;
                    _this.initTree();
                })
            },

            initTree() {
                let _this = this;
                let setting = {
                    check: {
                        enable: true
                    },
                    data: {
                        simpleData: {
                            idKey: "id",
                            pIdKey: "parent",
                            rootPId: "00000000",
                            enable: true
                        }
                    }
                };

                let zNodes = _this.categorys;

                _this.tree = $.fn.zTree.init($("#tree"), setting, zNodes);

                // 展开所有的节点
                // _this.tree.expandAll(true);
            },
        }
    }

</script>
<style scoped>
    .caption h3 {
        font-size: 20px;
    }

    @media (max-width: 1199px) {
        .caption h3 {
            font-size: 16px;
        }
    }
</style>